<!-- 电影拍片信息-->
<template>
  <sn-show-by-button-no-card
      class="schedule-info"
      :button-count="3"
      :content-count="3"
      :button-names="buttonNames">
    <!-- 描述-->
    <span slot="description" class="description">
      观影时间 :
    </span>
    <!-- 按钮-->
    <span slot="buttonName0">
      {{ buttonNames[0] }}
    </span>
    <span slot="buttonName1">
      {{ buttonNames[1] }}
    </span>
    <span slot="buttonName2">
      {{ buttonNames[2] }}
    </span>
    <!-- 拍片内容-->
    <!-- 今天-->
    <el-table
        slot="content0"
        :data="todayData"
        stripe
        style="width: 100%">
      <el-table-column
          align="center"
          label="放映时间">
        <template slot-scope="scope">
          <sn-text :text="String(scope.row.showDate).split(' ')[1]" font-weight="bold" :font-size="18"/>
          <sn-text :text="String(scope.row.movieFinishTime).split(' ')[1] + '散场'"/>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="movieLanguageVersion"
          label="语言版本">
      </el-table-column>
      <el-table-column
          align="center"
          prop="hall.name"
          label="放映厅">
        <template slot-scope="scope">
          {{ String(scope.row.hall.name).split('<')[0] }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="price"
          label="售价（元）">
        <template slot-scope="scope">
          <span class="price">
            ￥{{ scope.row.price }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="选座购票">
        <template slot-scope="scope">
          <el-button
              @click="toChooseTodaySeat(scope.row)"
              type="danger" round>
            选座购票
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 明天-->
    <el-table
        slot="content1"
        :data="tomorrowData"
        stripe
        style="width: 100%">
      <el-table-column
          align="center"
          label="放映时间">
        <template slot-scope="scope">
          <sn-text :text="String(scope.row.showDate).split(' ')[1]" font-weight="bold" :font-size="18"/>
          <sn-text :text="String(scope.row.movieFinishTime).split(' ')[1] + '散场'"/>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="movieLanguageVersion"
          label="语言版本">
      </el-table-column>
      <el-table-column
          align="center"
          label="放映厅">
        <template slot-scope="scope">
          {{ String(scope.row.hall.name).split('<')[0] }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="price"
          label="售价（元）">
        <template slot-scope="scope">
          <span class="price">
            ￥{{ scope.row.price }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="选座购票">
        <template slot-scope="scope">
          <el-button
              @click="toChooseTomorrowSeat(scope.row)"
              type="danger" round>
            选座购票
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 后天-->
    <el-table
        slot="content2"
        :data="theDayAfterTomorrowData"
        stripe
        style="width: 100%">
      <el-table-column
          align="center"
          label="放映时间">
        <template slot-scope="scope">
          <sn-text :text="String(scope.row.showDate).split(' ')[1]" font-weight="bold" :font-size="18"/>
          <sn-text :text="String(scope.row.movieFinishTime).split(' ')[1] + '散场'"/>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="movieLanguageVersion"
          label="语言版本">
      </el-table-column>
      <el-table-column
          align="center"
          label="放映厅">
        <template slot-scope="scope">
          {{ String(scope.row.hall.name).split('<')[0] }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="price"
          label="售价（元）">
        <template slot-scope="scope">
          <span class="price">
            ￥{{ scope.row.price }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="选座购票">
        <template slot-scope="scope">
          <el-button
              @click="toChooseTheDayAfterTomorrowSeat(scope.row)"
              type="danger" round>
            选座购票
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </sn-show-by-button-no-card>
</template>

<script>
export default {
  name: "CinemaSchedule",
  data() {
    return {}
  },
  props: {
    todayData: Array,
    tomorrowData: Array,
    theDayAfterTomorrowData: Array,
    buttonNames: Array
  },
  methods: {
    //选今天的座位
    toChooseTodaySeat(filedInfo) {
      let {showDate, endTime, movieLanguageVersion, hall, price} = filedInfo
      this.$router.push({
        name: 'chooseSeat'
      })
      let info = {
        date: '今天',
        field: this.buttonNames[0],
        showDate,
        endTime,
        movieLanguageVersion,
        hall,
        price
      }
      this.$emit('toChooseTodaySeat', info)
    },
    //选明天座位
    toChooseTomorrowSeat(filedInfo) {
      let {showDate, endTime, language, hall, price} = filedInfo
      let info = {
        date: '明天 ',
        field: this.buttonNames[1],
        showDate,
        endTime,
        language,
        hall,
        price
      }
      this.$emit('toChooseTomorrowSeat', info)
    },
    //选后天座位
    toChooseTheDayAfterTomorrowSeat(filedInfo) {
      let {showDate, endTime, language, hall, price} = filedInfo
      this.$router.push({
        name: 'chooseSeat'
      })
      let info = {
        date: '后天',
        field: this.buttonNames[2],
        showDate,
        endTime,
        language,
        hall,
        price
      }
      this.$emit('toChooseTheDayAfterTomorrowSeat', info)
    }
  },
}
</script>

<style scoped>
.description {
  font-size: 14px;
  color: #999;
  margin-right: 20px;
}

.price {
  font-size: 25px;
  color: #F56C6C;
  font-weight: bold;
}

.schedule-info {
  margin-bottom: 150px;
}
</style>